Linux下node-sass安装失败的解决方法与简单使用

记录一下安装node-sass的过程.关于CSS是不是一门编程语言,这里不讨论,但是它没有变量 语句 函数(反正我觉得他不是编程语言).于是程序员们发明了CSS预处理器(css preprocessor),它是一种专门的编程语言,可以使用你会的基本的编程知识进行编程,然后再转化成css文件.

介绍

主流的CSS预处理器有8种,我们今天介绍sass.它的官网,不过需要安装ruby.

• 不想安ruby,那就借助node安装node-sass吧.github主页
• 本人是deepin Linux 15.5版本

安装

• 由于node-sass会去github主页下载binding-node,然后又去亚马逊去下载,所以国内因为一些不可抗力无法下载.简单的进行如下的设置,都是初学者,我就不用命令的形式写了,下面直接写上内容.基本的命令用多了也就会了.

  • 在主目录下建立一个.npmrc的文件,在里面加上

sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/
electron_mirror=https://npm.taobao.org/mirrors/electron/
registry=https://registry.npm.taobao.org/
//顺序好像会有影响,我一开始不是这个顺序,后来改成这个,能安装成功

• 还必须在主目录的.bashrc下添加

export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"

• 好了,按理说可以用如下命令正常安装了,但是出问题了.

npm i -g node-sass

问题出现

第一个错误

1. 用了上述的命令,我第一次就报错,Error显示说权限不够,我果断用了

sudo npm i  -g node-sass

• 恩,然后就是无休止的错误,ctrl+c终止后,发现node_modules里面有node-sass,但是明显不能用.去github的issue上搜,大神都是用了

npm rebulid node-sass

然而成功是属于其他人的.

• 我试了一下,又是报错, 还是权限不够,我又加了sudo.
• 恩,又是报错.此时我很烦,你说没权限,我加了权限你又报错,这个死循环.......
• 没办法,生活还要继续,又去stackoverflow和github上搜,在node-sass的项目的Troubleshooting上发现了问题所在,如下是Linux部分的官方文档

Linux

This can happen if you are install node-sass as root, or globally with sudo. This is a security feature of npm. You should always avoid running npm as sudo because install scripts can be unintentionally malicious. Please check npm documentation on fixing permissions.
If you must however, you can work around this error by using the --unsafe-perm flag with npm install i.e.

$ sudo npm install --unsafe-perm -g node-sass

If this didn't solve your problem please open an issue with the output from our debugging script.

• 文档说: 当你用root角色或者全局使用sudo命令安装的时候,就会发生这个错误.(-妈个鸡,我就是全局安装node-sass啊),不过人家说了,这是npm的安全特性.(-你牛你说啥都行),你应该总是避免使用sudo去执行npm,因为安装脚本会发生意想不到的致命错误(-确实意想不到,以前我都是sudo安装模块,就这次栽了,不过你倒是说咋解决啊),请左转去npm的官方文档(- 这是重点,解决方法就在这里),如果你非要用sudo,用下面的命令吧..............如果这些仍没有解决你的问题,请看了我们的debugging脚本里面的解决方法在开启一个新的issue吧(如果大家还有和我不一样的错误,这里有很多解决方法)our debugging script.
• 好了,翻译完了,咱们去npm的第三章去看看咋解决.
• 第三章写的写的很明白.

1. 如何避免权限错误

下面是文档原文

If you see an EACCES error when you try to install a package globally, read this chapter. This error can be avoided if you change the directory where npm is installed. To do this, either:
Reinstall npm with a version manager (recommended),
or
Change npm's default directory manually.

它说:如果你尝试安装一个全局的包,遇到了权限的错误,应该读读这一章.如果npm被安装的时候你改变了npm的目录,这个错误就会被避免(- 言下之意,就是让你改目录,就可以避免不能操作/usr/local/底下的内容了,你或者可以改变目录的权限 chmod [mode] dir,效果应该一样的,我没试过,而且官方也没说),要想做到这个,要么用版本管理工具重装npm(- 官方推荐的),要么就手动改变npm的默认目录(我用的这个).

• 好了,翻译完了,如果你想用官方推荐的方法就用版本管理工具重装npm,就去看文档的第二章

版本管理工具

• 官方推荐用nvm,我以前误打误撞安了一个TJ大神(尤雨溪的偶像)的n模块( 不会用,就会升级,好尴尬啊)
• 还有一个

If you are using npm version 5.2 or greater, explore tools such as npx to circumvent permissions issues.

如果你的npm版本是5.2以上,可以用npx(又是好尴尬,我有npx,也不会用.....)

• 还有特别火的小猫yarn,快30000的star了(不过我没用......)
• 恩,前端的世界很精彩啊.

手动更改npm目录

Back-up your computer before moving forward.
Make a directory for global installations:

mkdir ~/.npm-global

Configure npm to use the new directory path:

npm config set prefix '~/.npm-global'

Open or create a ~/.profile file and add this line:

export PATH=~/.npm-global/bin:$PATH

Back on the command line, update your system variables:

source ~/.profile

Instead of steps 2-4, you can use the corresponding ENV variable (e.g. if you don't want to modify ~/.profile):

NPM_CONFIG_PREFIX=~/.npm-global

• 官方确实够详细,也能用,你不想麻烦,就在环境变量里面NPM_CONFIG_PREFIX=~/.npm-global
• 我试过这个方法,不过建立的.npm-global隐藏得太深了,ctrl+H都看不到它,我就采用了阮一峰大神的方法,方法还是要用大神的博客的方法或者官方的啊.

首先，在主目录下新建配置文件.npmrc，然后在该文件中将prefix变量定义到主目录下面。

prefix = /home/yourUsername/npm

然后在主目录下新建npm子目录。

mkdir ~/npm

此后，全局安装的模块都会安装在这个子目录中，npm也会到~/npm/bin目录去寻找命令。
最后，将这个路径在.bash_profile文件（或.bashrc文件）中加入PATH变量。

export PATH=~/npm/bin:$PATH

• 做完这个之后,全局卸载不能用的node-sass,再npm i -g node-sass

# 卸载全局模块
$ npm uninstall [package name] -global

• 很遗憾,旧目录的没删成功,不过新目录的能用就行........................

安装小总结

---

1. 一定不要用sudo安装,先手动改npm的目录
2. 更改.npmrc 和 .bashrc
3. npm i -g node-sass
4. 英语多学点,文档多看点,命令行多用点.

---

node-sass的简单使用

• 它的使用方法和ruby的sass有一点小区别

node-sass -wr scss -o css

• 官方使用手册
• 阮一峰教程

加油啊,sass